<template>
    <div class="upload">

        <div class="main">
            <div class="most">
                <p>名称：<input type="text" class="text" v-model="name"></p>
                <p>简介：<input type="text" class="text" v-model="intro"></p>
                <p>资源路径：<input type="text" class="text" v-model="path"></p>
                
                <p>资源类别：</p>
                <p class="input"><input type="radio" name="kinds" id="video" v-model="type0">视频</p>
                <p class="input"><input type="radio" name="kinds" v-model="type1">书籍</p>
            </div>
            
            <div class="photo">
                <p>选择封面：</p>
                <div  class="picture" v-show="up">
                  <a href="###" class="iconfont upload" title="点击选择上传封面">&#xe6cc;
                  <input type="file" ref="photo" accept="image/*" multiple v-on:input="aquire()"></a>
                </div>
                <div class="picture" v-show="!up">
                  <img :src="url" alt="" v-show="!up" id="photo" @mouseenter="showdel()" @mouseleave="notshow()">
                  <i class="iconfont" title="删除" v-show="delicon" @mouseenter="showdel()" @mouseleave="notshow()">
                    <a href="###" @click="del()">&#xe68f;</a>
                  </i>
                </div>

                
                <p class="select">选择分类：</p>
                <select v-model="kind">
                  <option>HTML</option>
                  <option>CSS</option>
                  <option>JAVASCRIPT</option>
                  <option>ES6</option>
                  <option>NODE.JS</option>
                  <option>VUE.JS</option>
                  <option>JAVA</option>
                  <option>PYTHON</option>
                  <option>C</option>
                  <option>C++</option>
                  <option>PHP</option>
                  <option>WEB</option>
                  <option>JQUERY</option>
                  <option>AJAX</option>
                  <option>DOM</option>
                  <option>XML</option>
                  <option>NET</option>
                  <option>JAVAWEB</option>
                  <option>ELEMENT</option>
                  <option>PS</option>
                  <option>UI</option>
                  <option>其它</option>
                </select>

                <div class="button" @click="upload()"><a href="###">提交</a></div>
            </div>

        </div>
        
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
export default {
    name: 'upload',
    data () {
      return {
        name: '',
        intro: '',
        path: '',
        type: '',
        type0: '',
        type1: '',
        kind: '',

        url: '',
        newphoto: '',

        number: 1,
        up: true,
        delicon: false,

        dialogImageUrl: '',

      }
    },


    methods: {

      getBase64 (file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader()
          let imgResult = ''
          reader.readAsDataURL(file)
          reader.onload = function () {
            imgResult = reader.result
          }
          reader.onerror = function (error) {
            reject(error)
          }
          reader.onloadend = function () {
            resolve(imgResult)
          }
        })
      },

      dataURItoBlob (dataURI) {
        // base64 解码
        // console.log('dataURI', dataURI)
        let byteString = window.atob(dataURI.split(',')[1])
        let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        // let T = mimeString.split('/')[1]
        let ab = new ArrayBuffer(byteString.length)
        let ia = new Uint8Array(ab)
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ab], {type: mimeString})
      },

      aquire () {
        let data = this.$refs.photo.files[0]
        console.log('data', data)
        // this.up = false
        // this.url = data.name
        // console.log(this.url)

         this.getBase64(data).then(res => {
          //  console.log('res', res)
           this.up = false
           this.url = res
           
          // this.newphoto = res
          // console.log('this.newphoto', this.newphoto)
          this.newphoto = this.dataURItoBlob(res)
          console.log('newphoto', this.newphoto)
          // if (this.newphoto !== '') {
            // this.photo = false
            // this.mod = true
          
            // 获取修改后的图片url
            // this.url = this.$refs.photo.value
            // console.log(this.url)

            // console.log(this.newphoto)

            var formdata = new FormData()
            formdata.append('photo', this.newphoto)


            axios.post(`/api/blogPhoto`, formdata, {headers:{'Content-type': 'multipart/form-data'}}).then((response) => {

              if (response.status === 200) {
                // this.$message({
                //   type: 'success',
                //   message: response.data
                // })
                
              } 

            })

            // this.photo = formdata
            // formdata.append('photo', ' '+this.photoname)
            console.log(formdata)
            // console.log(this.photo)
        })

        // this.up = false
      },

      showdel () {
        this.delicon = true
      },

      notshow () {
        this.delicon = false
      },

      del () {
        this.up = true
      },

      upload () {
        if (this.type1 != "") {
          this.type = 1

        } else {
          this.type = 0

        }
        console.log(this.type,this.type0,this.type1)

        if (this.photo !== "") {
          // console.log(this.photo)
          let postData = qs.stringify({
            name: this.name,
            introduction: this.intro,
            path: this.path,
            type: this.type,
            clazz: this.kind,
          })

          axios.post(`/api/writeResource`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              // console.log(response.data)
              // alert(response.data)
              if (response.data === "提交成功") {
                this.$message({
                  type: 'success',
                  message: response.data
                })
                this.$router.push("/")
              }
              else {
                this.$message({
                  type: 'error',
                  message: response.data
                })
              }
            } 

          })
        }
        else {
          this.$message({
            type: 'error',
            message: "请先选择文件！"
          })
        }

      },

    },
    mounted () {
      document.getElementById('video').checked = true
    }
}
</script>

<style lang="stylus" scoped>
.upload 
  width 100%
  height 40rem
  margin-top 5rem
  position relative
  //background-color red
  .main
    width 80%
    height 35rem
    position absolute 
    top 0rem
    left 13%
    padding-top 4rem
    margin-bottom  2rem
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    .most
      width 50%
      height auto
      float left
      //background-color skyblue
      p
        width 50%
        margin-bottom 4rem
        margin-left 8rem
        height 2rem
        font-size 1rem
        position relative
        .text
          position absolute
          left 5rem
          border .05rem #ccc solid
          box-shadow: 0 0 0.1rem rgba(131, 171, 175, 0.5);
      .input 
        margin-left 10rem
        margin-top -3rem
    .photo
      width 50%
      height auto
      margin-top -.5rem
      float right
      // background-color red
      p
        line-height 2rem
        font-size 1rem
      .picture
        width 50%
        margin-left 20%
        min-height 12rem
        margin-top 1rem
        border-radius 10px
        background-color #fbfdff
        border 1px dashed #c0ccda
        position relative
        // background-color skyblue
        .upload
          width 10%
          line-height 12rem
          margin-left 45%
          color #26a2ff
          font-size 1.5rem
          z-index 10
          // background-color red
        input 
          width 400%
          position absolute
          line-height 12rem
          left -100%
          opacity 0
          // background-color red
        img
          width 100%
          height 12rem
          margin-left 0%
          border-radius 10px
        i
          width 100%
          line-height 12rem
          top 0
          position absolute
          left 0%
          text-align center
          background-color rgba(220,220,220,0.3)
          a
            color red
            font-size 1.3rem
            font-weight 1000
      .select 
        width 100%
        margin-top 3rem
      select 
        width 25%
        line-height 2rem
        margin-left 7rem
        font-size .8rem
        border .05rem #333 solid
      .button
        width 15%
        line-height 2rem
        text-align center
        font-size 1rem
        border-radius 10%
        margin-top 6rem
        margin-left 50%
        background-color skyblue
        border 1px #ccc solid
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      .button:hover
        background-color #26a2ff
        a 
          color #fff
</style>